<template>
  <div class="violation">
    <!-- header -->
    <div class="header">
      <h2>车辆违章登记</h2>
      <div class="buttons">
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新增</el-button>
        <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
    </div>
    <!-- header -->
    <!-- table -->
    <el-table :data="
      tableData2.filter(
        (data) =>
          !search ||
          data.carNumber.toLowerCase().includes(search.toLowerCase())
      )
    " style="width: 100%" height="650" border>
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column prop="wzid" label="违章编号" width="165" sortable>
      </el-table-column>
      <el-table-column prop="carNumber" label="车牌号" width="165" sortable>
      </el-table-column>
      <el-table-column prop="driver" label="驾驶员" width="165" sortable>
      </el-table-column>
      <el-table-column prop="violationItem" label="违章项目" width="165">
      </el-table-column>
      <el-table-column prop="violationTime" label="违章时间" width="165" sortable>
      </el-table-column>
      <el-table-column prop="penalty" label="罚款" width="165">
      </el-table-column>
      <el-table-column prop="deductMark" label="扣分" width="165">
      </el-table-column>
      <el-table-column fixed="right" width="165">
        <template slot="header" slot-scope="">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            查看
          </el-button>
          <el-button type="text" size="small" @click="change(scope.row)">编辑</el-button>
          <el-button type="text" size="small" style="color: red" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination background layout="prev, pager, next" :total="10">
      </el-pagination>
    </div>

    <!-- 分页 -->
    <!-- table -->
    <!-- 详情 -->
    <el-drawer title="详情" :visible.sync="drawer" :direction="direction" :before-close="cancel" :size="500">
      <div class="details">
        <div class="details-main">
          <!-- ele ui 描述列表 -->
          <div>描述列表</div>
          <el-descriptions title="" direction="vertical" :column="2">
            <el-descriptions-item label="违章编号">{{
              details.wzid
            }}</el-descriptions-item>
            <br />
            <el-descriptions-item label="违章时间">{{
              details.violationTime
            }}</el-descriptions-item>
            <el-descriptions-item label="违章项目">{{
              details.violationItem
            }}</el-descriptions-item>
            <el-descriptions-item label="违章原因">
              {{ details.violationItem ? "_" : "_" }}
            </el-descriptions-item>
          </el-descriptions>
          <!-- ele ui 描述列表 -->

          <!-- 表单 -->
          <div>表单</div>
          <el-form label-position="top" label-width="80px">
            <el-form-item label="违章编号">
              {{ details.wzid }}
            </el-form-item>
            <el-form-item label="违章时间">
              {{ details.violationTime }}
            </el-form-item>
            <el-form-item label="违章项目">
              {{ details.violationItem }}
            </el-form-item>
            <el-form-item label="违章原因">
              {{ details.violationItem ? "_" : "_" }}
            </el-form-item>
          </el-form>
          <!-- 表单 -->
        </div>
        <div class="drawer__footer">
          <el-button type="primary" @click="cancel"> 确 定 </el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 详情 -->
    <!-- 添加 -->
    <el-dialog title="新增" :visible.sync="dialogAddVisible">
      <div class="add">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="车辆编号">
            <el-input type="input" v-model.trim="form.num"></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input type="input" v-model.trim="form.number"></el-input>
          </el-form-item>
          <el-form-item label="违章时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>

          <el-form-item label="违章项目">
            <el-input type="input" v-model.trim="form.type"></el-input>
          </el-form-item>
          <el-form-item label="驾驶员">
            <el-input type="input" v-model.trim="form.driver"></el-input>
          </el-form-item>
          <el-form-item label="扣分">
            <el-input type="input" v-model.trim="form.score"></el-input>
          </el-form-item>
          <el-form-item label="罚款">
            <el-input type="input" v-model.trim="form.penalty"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(form)">提交</el-button>
            <el-button @click="dialogAddVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 添加 -->
    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="dialogChangeVisible">
      <div class="change">
        <el-form ref="details" :model="details" label-width="80px">
          <el-form-item label="违章编号" label-width="auto">
            {{ details.wzid }}
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input type="input" v-model.trim="details.carNumber"></el-input>
          </el-form-item>
          <el-form-item label="违章时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model.trim="details.violationTime" style="width: 100%"
                value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="违章项目">
            <el-input type="input" v-model.trim="details.violationItem"></el-input>
          </el-form-item>
          <el-form-item label="驾驶员">
            <el-input type="input" v-model.trim="details.driver"></el-input>
          </el-form-item>
          <el-form-item label="扣分">
            <el-input type="input" v-model.trim="details.deductMark"></el-input>
          </el-form-item>
          <el-form-item label="罚款">
            <el-input type="input" v-model.trim="details.penalty"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit2(details)">提交</el-button>
            <el-button @click="dialogChangeVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <!-- 编辑 -->
  </div>
</template>

<script>
 
import { wzlist } from "../../apis/lyjcom";  //列表
import { wzdelete } from "../../apis/lyjcom"; //删除单条
import { wzinsert } from "../../apis/lyjcom"; //新增 
import { wzselect } from "../../apis/lyjcom"; //查看单条数据 
import { wzupdate } from "../../apis/lyjcom"; //修改单条数据 
export default {
  mounted() {
    //获取
    wzlist().then((ok) => {
      console.log(ok.data);
      this.tableData2 = ok.data.data;
    });
  },
  methods: {
    //编辑
    change(row) {
      this.details = row;
      this.dialogChangeVisible = true;
    },
    onSubmit2(details) {
      if(details.carNumber!= "" &&details.deductMark!= "" &&details.driver!= "" && details.penalty!= "" && details.violationItem!= "" &&details.violationTime!= "" && details.wzid!= ""){
        wzupdate(details.carNumber, details.deductMark, details.driver, details.penalty, details.violationItem, details.violationTime, details.wzid).then((ok) => {
        console.log(ok)
      })
      //提交后关闭表单
      this.dialogChangeVisible = false;
      }else{
        this.$message({
          message: '请填写完整表格内容',
          type: 'warning'
        });
      }  
    },
    //新增提交   
    onSubmit(form) {
      console.log("submit!", form);
      // 点击提交按钮新增
      if (this.form.number != "" && this.form.score != "" && this.form.driver != "" && this.form.penalty != "" && this.form.type != "" && this.form.date1 != "" && this.form.num != "") {
        wzinsert(this.form.number, this.form.score, this.form.driver, this.form.penalty, this.form.type, this.form.date1, this.form.num).then((ok) => {
          console.log(ok)
          // 再次获取列表可以刷新页面
          wzlist().then((ok) => {
            console.log(ok.data);
            this.tableData2 = ok.data.data;
          });
        })
        //提交后关闭表单
        this.dialogAddVisible = false;
      } else {
        this.$message({
          message: '请填写完整表格内容',
          type: 'warning'
        });
      }
    },
    //新增
    add() {
      this.dialogAddVisible = true;
    },
    //删除
    del(row) {
      console.log(row.wzid)
      wzdelete(row.wzid).then((ok) => {
        console.log(ok)
        wzlist().then((ok) => {
          console.log(ok.data);
          this.tableData2 = ok.data.data;
        });
      })
    },
    //详情取消
    cancel() {
      this.drawer = false;
    },
    // 关闭抽屉
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => { });
    },
    //查看
    handleClick(row) {
      console.log(row);
      this.drawer = !this.drawer;
      this.details = row;
      wzselect(row.wzid).then((ok) => {
        console.log("查看单条数据", ok)
      })
    },
  },
  data() {
    return {
      // 编辑对话框
      dialogChangeVisible: false,
      //添加对话框
      dialogAddVisible: false,

      //抽屉
      direction: "rtl",
      drawer: false,
      //搜索
      search: "",
      //列表demo
      // tableData: [],
      //列表
      tableData2: [],
      //详情
      details: {},
      //添加表单
      form: {
        name: "",
        region: "",
        date1: "",//违章时间
        // date2: "",
        delivery: false,
        type: "",//违章项目
        resource: "",
        // desc: "",
        num: "",//车辆编号
        number: "",//车牌号
        driver: "", //司机
        score: "",//扣分
        penalty: "",//罚款

      },
    };
  },
};
</script>

<style lang="scss" scoped>
.violation {
  // height: 100%;
  // width: auto;
  // min-width: 444px;
  min-height: 800px;
  background-color: white;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  position: relative;

  //头部
  .header {
    h2 {
      margin: 5px 0;
      font-size: 18px;
      font-weight: 400;
    }

    .buttons {
      margin: 20px 0;
    }
  }

  //详情
  .details {
    height: 100%;
    display: flex;
    flex-direction: column;

    .details-main {
      margin-top: 50px;
      padding: 20px;
      flex: 1;
    }

    .drawer__footer {
      display: flex;
      justify-content: center;
    }
  }

  //分页
  .block {
    margin: 10px 0;
  }
}
</style>